<template>
	<view class="">
		<view class="tabbar-view" :style="{'padding-bottom':is_cmpt?'20px':'0'}">
			<block v-for="(item, index) in tabbar_list" :key="index">
				<view class="tabbar-item" @click="goToTabbar(item.path,item.name)">
					<image class="tabbar-icon" :src="item.name === type?item.image_acitve:item.image" mode="aspectFit"></image>
					<view class="s20 familytow fblod" :style="{'color':item.name === type?activeColor:color}">
						{{item.title}}
					</view>
				</view>
			</block>
		</view>
		<view class="" style="height: 150rpx;"></view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props:{
			type:{
				default:"one",
				type:String
			},
			activeColor:{
				default:"#EBBE87",
				type:String
			},
			color:{
				default:"#999999",
				type:String
			}
		},
		data() {
			return {
				cmpt:false,
				is_cmpt:false,
				tabbar_list:[
					{
						name:"one",
						title:"首页",
						image:"../static/storeIcon/store_index.png",
						image_acitve:"../static/storeIcon/store_index_active.png",
						path:"/pages/filePages/storePages/index"
					},
					{
						name:"two",
						title:"全部商品",
						image:"../static/storeIcon/store_allItems.png",
						image_acitve:"../static/storeIcon/store_allItems_active.png",
						path:"/pages/filePages/storePages/allItems"
					},
					{
						name:"three",
						title:"分类",
						image:"../static/storeIcon/store_classification.png",
						image_acitve:"../static/storeIcon/store_classification_active.png",
						path:"/pages/filePages/storePages/classification"
					},
					{
						name:"four",
						title:"活动",
						image:"../static/storeIcon/store_activity.png",
						image_acitve:"../static/storeIcon/store_activity_active.png",
						path:"/pages/filePages/storePages/activity"
					},
					{
						name:"five",
						title:"推荐排行",
						image:"../static/storeIcon/tuijian.png",
						image_acitve:"../static/storeIcon/tuijian_active.png",
						path:"/pages/filePages/storePages/recommend"
					}
				]
			};
		},
		created() {
			let system = uni.getSystemInfoSync()
			this.is_cmpt = this.bottomNav()
		},
		methods:{
			goToTabbar(path,name){
				if(name == this.type) return
				uni.redirectTo({
					url:path,
					fail(e) {
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-view{
		display: flex;
		width: 750upx;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 98;
		min-height: 100upx;
		box-sizing: border-box;
		padding-top: 16upx;
		box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.18);
		.tabbar-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 30%;
			.tabbar-icon{
				width: 40upx;
				height: 40upx;
				margin-bottom: 7upx;
			}
		}
	}
</style>
